{template 'web/store/base_menu'}
<script src="{MODULE_URL}template/resources/highcharts/highcharts.js"></script>
<div class="top_tab"> 
  <a href="{php echo $this->createWebUrl('salemember')}" class="layui-btn {if $operation != 'display'}layui-btn-primary{/if}">会员统计</a> 
</div>
<style>
.panelbox-head a{ margin-right:10px}
.green{ color:#090}
.orange{ color:#F60}
.showbox{ margin-right:10px; background:#EEE; padding:10px 20px;}
.showbox2{margin-right:10px;}
.showbox h3{ font-size:12px; text-align:left; margin:20px 0 30px 0}
.showbox h3 b{ font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#F60}
h2{ font-size:18px; margin:10px;}
</style>
{if $operation == 'display'}
<div class="panelbox">
<form action="" method="post" class="layui-form" enctype="multipart/form-data">
  <div class="panelbox-head">
  	<a href="" class="layui-btn layui-btn-small"><i class="layui-icon">&#xe601;</i> 导出</a>
    <div class="layui-btn-group selecttime">
      <button type="button" class="layui-btn layui-btn-small">今天</button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-small">昨天</button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-small">近7天</button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-small">其他</button>
    </div>
    <span id="top_time" style="display:none">{php echo tpl_form_field_daterange('gametime', array('start' => date('Y-m-d H:i'),'end'=>date('Y-m-d H:i')),true)} <button type="button" onclick="getpage(1)" class="layui-btn layui-btn-danger layui-btn-small">查询</button></span>
    <input type="hidden" name="dateselect" value="1" />
  </div>
  <div class="panelbox-body">
  	<h2>散客-消费统计</h2>
    <div class="row notmember">
    	<div class="col-md-3">
        	<div class="showbox">
            	<p>销售笔数</p>
                <h3><b>99</b> 笔</h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>销售金额</p>
                <h3>￥ <b>99</b> </h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>客单价</p>
                <h3>￥ <b>99</b> </h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>商品单价</p>
                <h3>￥ <b>99</b> </h3>
            </div>
        </div>
    </div>
    <h2>会员-消费统计</h2>
    <div class="row member">
    	<div class="col-md-3">
        	<div class="showbox">
            	<p>销售笔数</p>
                <h3><b>99</b> 笔</h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>销售金额</p>
                <h3>￥ <b>99</b> </h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>客单价</p>
                <h3>￥ <b>99</b> </h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>商品单价</p>
                <h3>￥ <b>99</b> </h3>
            </div>
        </div>
    </div>
  </div>
  </form>
</div>
<div class="panelbox">
	<div class="panelbox-body">
    	<div class="row">
        	<div class="col-md-3">
                <div class="showbox2">
                    <div id="container1"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="showbox2">
                    <div id="container2"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="showbox2">
                    <div id="container3"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="showbox2">
                    <div id="container4"></div>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
<script language="javascript">
$(".selecttime button").on("click",function(){
	var val=$(this).index()+1;
	$("input[name='dateselect']").val(val);
	$(this).removeClass("layui-btn-primary").siblings().addClass("layui-btn-primary");
	if($(this).text()=="其他"){
		$("#top_time").show();
	}else{
		$("#top_time").hide();
		getpage(1);
	}
});
layui.use(['layer', 'laypage', 'element','form'], function(){
  var layer = layui.layer
  ,laypage = layui.laypage
  ,element = layui.element
  ,form = layui.form;
  getpage(1);
  
  form.on('submit(submitbtn)', function(data){
    
    return true;
  });
});
function getpage(){
	var index2=layer.load(1, {shade: [0.1,'#fff']});
	var searchdata={
		"datetype":$("input[name='dateselect']").val(),
		"statrtime":$("input[name='gametime[start]']").val(),	
		"endtime":$("input[name='gametime[end]']").val(),
	}
	$.post("{php echo $this->createWebUrl('salemember',array('op'=>'getinfo'))}",searchdata,function(returnstr){
		layer.close(index2);
		console.log(returnstr);
		var result=eval("("+returnstr+")");
		if(result.success){
			var notmember=result.notmember;
			var member=result.member;
			$(".notmember h3").eq(0).find("b").text(notmember.num1);
			$(".notmember h3").eq(1).find("b").text(notmember.num2 ? fee2num(notmember.num2) : 0);
			$(".notmember h3").eq(2).find("b").text(fee2num(parseInt(parseInt(notmember.num2)/parseInt(notmember.num1))));
			$(".notmember h3").eq(3).find("b").text(fee2num(parseInt(parseInt(notmember.num2)/parseInt(notmember.num3))));
			
			$(".member h3").eq(0).find("b").text(member.num1);
			$(".member h3").eq(1).find("b").text(member.num2 ? fee2num(member.num2) : 0);
			$(".member h3").eq(2).find("b").text(fee2num(parseInt(parseInt(member.num2)/parseInt(member.num1))));
			$(".member h3").eq(3).find("b").text(fee2num(parseInt(parseInt(member.num2)/parseInt(member.num3))));
			showPicture(notmember,member);
		}else{
			layer.msg(result.msg ? result.msg : returnstr,{icon:2,time:2000});
			return;
		}
	});
}
function showPicture(a,b){
	var Nnum1=parseInt(a.num1);
	var Nnum2=parseInt(a.num2);
	var Nnum3=parseInt(a.num3);
	var Mnum1=parseInt(b.num1);
	var Mnum2=parseInt(b.num2);
	var Mnum3=parseInt(b.num3);
	if(Nnum1==0 && Mnum1==0)return;
	$('#container1').highcharts({
		chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false
		},
		title: {
			text: '销售量占比'
		},
		tooltip: {
			headerFormat: '{series.name}<br>',
			pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					format: '<b>{point.name}</b>: {point.percentage:.1f} %',
					style: {
						color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
					}
				}
			}
		},
		series: [{
			type: 'pie',
			name: '销售量占比',
			data: [
				['散客',Nnum1],
				['会员',Mnum1],
			]
		}]
	});
	$('#container2').highcharts({
		chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false
		},
		title: {
			text: '销售金额占比'
		},
		tooltip: {
			headerFormat: '{series.name}<br>',
			pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					format: '<b>{point.name}</b>: {point.percentage:.1f} %',
					style: {
						color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
					}
				}
			}
		},
		series: [{
			type: 'pie',
			name: '销售金额占比',
			data: [
				['散客',Nnum2],
				['会员',Mnum2],
			]
		}]
	});
	
	$('#container3').highcharts({
		chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false
		},
		title: {
			text: '销售商品数量占比'
		},
		tooltip: {
			headerFormat: '{series.name}<br>',
			pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					format: '<b>{point.name}</b>: {point.percentage:.1f} %',
					style: {
						color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
					}
				}
			}
		},
		series: [{
			type: 'pie',
			name: '销售商品数量占比',
			data: [
				['散客',Nnum3],
				['会员',Mnum3],
			]
		}]
	});
}
</script>

{/if}